@charset "UTF-8";
/*--- kiricos banner settign
---------------------------------------------------*/
div.contactkiricosprot img{display: block; width:100%;}
div.bannertitle{padding:0; margin:0 auto 1em auto; border-bottom:4px solid #b81c22;}
#maincontent div.bannertitle h2{padding:0.5em 2em 0.25em 2em; margin: 0 auto; border-bottom:4px solid #b81c22; color:#4c4948; font-weight:normal;}
#maincontent div.bannertitle h2:before{content:" "; display:none;}
#maincontent div.bannertitle h3{margin:0 auto; padding:0.5em 1em; line-height:1;}
#maincontent div.bannertitle h3 > span{padding:0; margin:0 auto; width:100%; max-width:192px;}
#maincontent div.bannertitle h3 > span:before ,
#maincontent div.bannertitle h3 > span:after{content:" "; display: none;}
#maincontent div.bannertitle h3 img{display:block; margin:0 auto;}

div.contactkiricosprot{padding-top:2em; padding-bottom:1.5em;}

ul.contactinfolist ,
div.businesshourstext {position:relative; max-width:384px; margin:0 auto;}

ul.contactinfolist li{margin-bottom:0.5em;}
ul.contactinfolist li:last-of-type{margin-bottom:0;}

ul.contactinfolist li > a ,
ul.contactinfolist li.freedial2col div.freedial2colbox{position:relative; display: block; padding:0em 7em 0em 0; border-width:0 0 4px 0; border-style:solid; background:#ffffff;}
ul.contactinfolist li > a:before ,
ul.contactinfolist li > a:after ,
ul.contactinfolist li.freedial2col div.freedial2colbox:before ,
ul.contactinfolist li.freedial2col div.freedial2colbox:after{content:" "; display:block; position:absolute; top:0; bottom:0; margin:auto; }
ul.contactinfolist li > a:before ,
ul.contactinfolist li.freedial2col div.freedial2colbox:before{content:" "; right:0.5em; width:4em; height:4em; background-size:100%; background-position:center; background-repeat: no-repeat; z-index:3;}
ul.contactinfolist li > a:after ,
ul.contactinfolist li.freedial2col div.freedial2colbox:after{content:" ";width:4em; height:4em; right:0; top:auto; bottom:0;}
ul.contactinfolist li > a span.box01 ,
ul.contactinfolist li.freedial2col div.freedial2colbox h4,
ul.contactinfolist li > a span.box02 ,
ul.contactinfolist li.freedial2col p.box02{display:block; position:relative; width:100%;}
ul.contactinfolist li > a span.box01 ,
ul.contactinfolist li.freedial2col div.freedial2colbox h4{padding:0.5em 1em; color:#ffffff; font-weight:bold; font-size:16px; font-size:1rem; text-align: center;}
ul.contactinfolist li > a span.box01:before ,
#maincontent ul.contactinfolist li.freedial2col div.freedial2colbox h4:before{content:" "; display:block; position:absolute; top:0; right:-2em; width:2em; height:100%;}
ul.contactinfolist li > a span.box02 ,
ul.contactinfolist li.freedial2col p.box02{padding:0.5em 1em 0.5em 1em; line-height: 1; text-align: right;}
ul.contactinfolist li > a span.box02:before ,
ul.contactinfolist li.freedial2col p.box02:before{content:" "; display:block; position:absolute; top:0; bottom:0; right:0; margin:auto; width:0.75em; height:0.75em; background-size:0.75em; background-position:center; background-repeat: no-repeat;}

ul.contactinfolist li.kiricos a{border-color:#b81c22;}
ul.contactinfolist li.kiricos a:before{content:" "; background-image:url(../images/kiricosbanner/kiricosicon.svg);}
ul.contactinfolist li.kiricos a:after{content:" ";background:linear-gradient(to bottom right, transparent 50%, #ff969e 50%) top left/ 100% 100% no-repeat;}
ul.contactinfolist li.kiricos a span.box01{background:#b81c22;}
ul.contactinfolist li.kiricos a span.box01 img{height:1.5em;}
ul.contactinfolist li.kiricos a span.box01:before{content:" "; background:linear-gradient(to top left, transparent 50%, #b81c22 50%) top left/ 100% 100% no-repeat;}
ul.contactinfolist li.kiricos a span.box02:before{content:" "; background-image:url(../images/kiricosbanner/doublearrowiconb81c22.svg);}

ul.contactinfolist li.onlinereservation a{border-color:#2d5cbe;}
ul.contactinfolist li.onlinereservation a:before{content:" "; background-image:url(../images/kiricosbanner/onlinereservationicon.svg);}
ul.contactinfolist li.onlinereservation a:after{content:" ";background:linear-gradient(to bottom right, transparent 50%, #abc3f6 50%) top left/ 100% 100% no-repeat;}
ul.contactinfolist li.onlinereservation a span.box01{background:#2d5cbe;}
ul.contactinfolist li.onlinereservation a span.box01:before{content:" ";background:linear-gradient(to top left, transparent 50%, #2d5cbe 50%) top left/ 100% 100% no-repeat;}
ul.contactinfolist li.onlinereservation a span.box02:before{content:" ";}
ul.contactinfolist li.onlinereservation a span.box02:before{content:" "; background-image:url(../images/kiricosbanner/doublearrowicon2d5cbe.svg);}

ul.contactinfolist li.freedial > a ,
ul.contactinfolist li.freedial2col div.freedial2colbox{border-color:#168042;}
ul.contactinfolist li.freedial > a:before ,
ul.contactinfolist li.freedial2col div.freedial2colbox:before{content:" "; background-image:url(../images/kiricosbanner/freedialicon.svg);}
ul.contactinfolist li.freedial > a:after ,
ul.contactinfolist li.freedial2col div.freedial2colbox:after{content:" ";background:linear-gradient(to bottom right, transparent 50%, #b3e6c8 50%) top left/ 100% 100% no-repeat;}
ul.contactinfolist li.freedial > a span.box01 ,
#maincontent ul.contactinfolist li.freedial2col div.freedial2colbox h4{background:#168042; color:#ffffff;}
ul.contactinfolist li.freedial > a span.box01:before ,
#maincontent ul.contactinfolist li.freedial2col div.freedial2colbox h4:before{content:" ";background:linear-gradient(to top left, transparent 50%, #168042 50%) top left/ 100% 100% no-repeat;}
ul.contactinfolist li.freedial > a span.box02 ,
ul.contactinfolist li.freedial2col p.box02 a{position:relative;}
ul.contactinfolist li.freedial > a span.box02:before{content:" ";}
ul.contactinfolist li.freedial > a span.box02 > span ,
ul.contactinfolist li.freedial2col p.box02 span{position:relative; display:inline-block; padding-left:3em; letter-spacing: 0; font-size:16px; font-size:1rem;}
ul.contactinfolist li.freedial > a span.box02 span img ,
ul.contactinfolist li.freedial2col p.box02 span img{display:block; position:absolute; top:0; left:0; width:auto; height:1.5em;}
ul.contactinfolist li.freedial > a span.box02 > span span ,
ul.contactinfolist li.freedial2col p.box02 span span{display:block; font-size:0.5em;}
ul.contactinfolist li.freedial > a span.box02:before ,
ul.contactinfolist li.freedial2col p.box02:before{content:" "; background-image:url(../images/kiricosbanner/doublearrowicon168042.svg);}

ul.contactinfolist li.freedial2col a{display:block; padding:0; margin:0 0 0.5em 1em; border-bottom:1px dashed #ccc;}
ul.contactinfolist li.freedial2col a:last-of-type{margin-bottom:0; padding:0; border:0;}
ul.contactinfolist li.freedial2col a:before{content:" "; width:0; height:0;}
#maincontent ul.contactinfolist li.freedial2col h4{margin-bottom:0.5em;}
#maincontent ul.contactinfolist li.freedial2col h5{margin-bottom:0; padding-left:0; font-size:14px; font-size:0.875rem; text-align: right; letter-spacing: 0; line-height:1; color:#168042;}
#maincontent ul.contactinfolist li.freedial2col h5:before{content:" "; display:none;}
#maincontent ul.contactinfolist li.freedial2col p.box02{margin:0; padding-left:0; line-height:1;}
ul.contactinfolist li.freedial2col p.box02 > span:before{ content:" "; display:block; position:absolute; bottom:0; left:3em; width:calc(100% - 3em); height:2px; background:#168042; transform:rotateY(90deg);}

/*--- linkaction setting ---*/
#maincontent ul.contactinfolist li a ,
#maincontent ul.contactinfolist li a:after ,
#maincontent ul.contactinfolist li a span.box01 ,
#maincontent ul.contactinfolist li a span.box01:before ,
ul.contactinfolist li.freedial2col div.freedial2colbox ,
ul.contactinfolist li.freedial2col div.freedial2colbox:before ,
ul.contactinfolist li.freedial2col p.box02 > span:before{content:" "; transition:all 0.5s ease !important; }

#maincontent ul.contactinfolist li a:hover img{content:" "; opacity:1;}
ul.contactinfolist li:hover > a ,
ul.contactinfolist li.freedial2col:hover div.freedial2colbox ,
ul.contactinfolist li.freedial2col:hover div.freedial2colbox:before{transform: scale(1.025);}

ul.contactinfolist li:hover.kiricos a{background:#ffcbd1;}
ul.contactinfolist li:hover.onlinereservation a{background:#d5f4ff;}
ul.contactinfolist li:hover.freedial > a ,
ul.contactinfolist li.freedial2col:hover div.freedial2colbox{background:#ceffd2;}
ul.contactinfolist li.freedial2col a:hover p.box02 > span:before{content:" "; transform:rotate(0);}

/*--- businesshourstext  setting ---*/
div.businesshourstext{padding:1em 0 0 0;}
#maincontent div.businesshourstext p{position:relative; text-align: center;}
#maincontent div.businesshourstext p span.heddingtext{display: block; width:8em; margin:0 auto 0.25em auto; padding:0.15em 1em; border-width:1px 0; border-style:solid; border-color:#4c4948; color:#4c4948; text-align: center; font-weight:bold;}

#maincontent div.businesshourstext p.receptiontime{margin-bottom:0;}
#maincontent div.businesshourstext p.receptiontime span{display: block;}

/*--- businesshourstextotaplus setting ---*/
div.businesshourstextotaplus{padding:1em 0 0 0;}
#maincontent div.businesshourstextotaplus dl dt{margin:0 auto 0.25em auto; padding:0.5em 1em; border-width:1px 0; border-style:solid; border-color:#4c4948; color:#4c4948; text-align: center; font-weight:bold;}
#maincontent div.businesshourstextotaplus dl dd{margin-bottom:1em; padding:0.5em 1em;}
#maincontent div.businesshourstextotaplus dl dd:last-of-type{margin-bottom:0; padding-bottom:0;}
#maincontent div.businesshourstextotaplus p{position:relative; padding:0.25em 0 0.25em 6.5em; margin-bottom:0; line-height:1;}
#maincontent div.businesshourstextotaplus p.holidaydate {margin-bottom:0.5em;}
#maincontent div.businesshourstextotaplus .heddingtext{display: block; position:absolute; top:0; left:0; padding:0.25em 0.5em; border-radius:1em; background:#4c4948; color:#f7f1e5;}
#maincontent div.businesshourstextotaplus .weekday ,
#maincontent div.businesshourstextotaplus .holiday{display:block;}
#maincontent div.businesshourstextotaplus .holidaydate span{display: block;}
#maincontent div.businesshourstextotaplus .holidaylist span{position:relative;}
#maincontent div.businesshourstextotaplus .holidaylist span:after{content:" ";}
#maincontent div.businesshourstextotaplus .holidaylist span:last-of-type:after{content:" ";}

/*--- contactaddressotaplus setting 
---------------------------------------------------*/
div.contactaddressotaplus{position:relative; overflow: hidden;}
div.contactaddressotaplus img{display:block;}
.contactaddressotaplus{display:grid;grid-template-columns: 80px 1fr; justify-content: center; align-items: end; column-gap: 0.5em;}

div.contactaddressotaplus > dl{position:relative;}
.contactaddressotaplus{display:grid;grid-template-columns: 80px 1fr; justify-content: center; align-items: end; column-gap: 0.5em;}
.contactaddressotaplus img{display:block; width:100%;}
.contactaddressotaplus > dl > dt{padding:0.5em 0; width:100%; max-width: 192px; margin:0 auto;}
.contactaddressotaplus > dl > dd.contactdate a{display:grid; grid-template-columns: 2em auto; justify-content: center;align-items: center; word-break: break-word; overflow-wrap: normal; margin-bottom:0.25em; font-size:1.125rem; letter-spacing: 0;}
.contactaddressotaplus dd.contactdate ul{position: relative; padding: calc(0.725em + 2px) 0; border-width: 2px 0; border-style: solid; border-color: #2d5cbe;}
.contactaddressotaplus dd.contactdate ul li:before ,
.contactaddressotaplus dd.contactdate ul li:after{content:" "; display:block; position:absolute; left:0; right:0; width:100%; height:1px; background:#2d5cbe;}
.contactaddressotaplus dd.contactdate ul li:before {content:" "; top:2px;}
.contactaddressotaplus dd.contactdate ul li:after{content:" "; bottom:2px;}
.contactaddressotaplus dd.contactdate ul li{padding-bottom:0.5em; margin-bottom:0.5em; border-bottom:1px solid #cccccc;}
.contactaddressotaplus dd.contactdate ul li:last-of-type{padding-bottom:0; margin-bottom:0; border-bottom:0;}
.contactaddressotaplus li dt.datetitle{letter-spacing: 0.175em; color: #2d5cbe; font-weight: bold; text-align:center;}
.contactaddressotaplus dd.contactdate ul li dd{display:flex; flex-wrap: wrap; justify-content: center; text-align: center; letter-spacing: 0;}
.contactaddressotaplus dd.contactdate ul li dd span{display:block;}

/*--- rwd setting 
---------------------------------------------------*/
/* 320px-480px(mobile)*/
@media screen and (max-width:480px) 
{

}

/* 481px-767px(mobile/tabletsite) */ 
@media screen and (min-width:481px) 
{
    /*--- kiricos banner settign
    ---------------------------------------------------*/
    #maincontent div.businesshourstext p.receptiontime span:not(.heddingtext){display:inline-block;}
    #maincontent div.businesshourstext p.receptiontime span.weekday{position:relative; padding-right:2em;}
    #maincontent div.businesshourstext p.receptiontime span.weekday:before{content:"／"; position:absolute;top:0 ;bottom:0; right:0.5em; margin:auto;}

    /*--- businesshourstextotaplus setting ---*/
    #maincontent div.businesshourstextotaplus .holidaylist span{display:inline-block;}
    #maincontent div.businesshourstextotaplus .holidaylist span br{display:none;}
    #maincontent div.businesshourstextotaplus .holidaylist span:after{content:"・";}

    #maincontent div.businesshourstextotaplus span.weekday ,
    #maincontent div.businesshourstextotaplus span.holiday{display: inline-block;}
    #maincontent div.businesshourstextotaplus span.weekday{margin-right:1.5em;}

    /*--- contactaddressotaplus setting 
    ---------------------------------------------------*/
    .contactaddressotaplus{grid-template-columns:96px 1fr; column-gap: 1em;}
    #maincontent div.contactaddressotaplus dd.contactdate a{font-size:24px; font-size:1.5rem; font-weight:bold;}
    .contactdate ul li dl{display:grid; grid-template-columns: 5em 1fr; justify-content: center; column-gap: 1em;}
    .contactaddressotaplus > dl > dt{max-width: 256px;}
    .contactaddressotaplus dd.contactdate ul li dd{justify-content:start; column-gap: 0.5em;}
}

/* 768px(tabletsite) */
@media screen and (min-width:768px)
{
    /*--- kiricos banner settign
    --------------------------------------------------*/
    ul.contactinfolist ,
    div.businesshourstext {max-width:none;}
    #maincontent div.bannertitle h3 > span{padding:0; margin:0 auto; max-width:calc(480px + 1em);}
    #maincontent div.bannertitle h3 img{margin:0 auto; max-width:240px;}
        
    ul.contactinfolist li{float: left; width:49%;}

    ul.contactinfolist li a{padding-right:8em;}
    ul.contactinfolist li a:before{content:" "; width:5em; height:5em;}

    ul.contactinfolist li a span.box01{font-size:20px; font-size:1.25rem;}
    ul.contactinfolist li a span.box02{font-size:18px; font-size:1.125rem;}

    ul.contactinfolist li.kiricos{margin:0 2% 2% 0;}

    ul.contactinfolist li.freedial ,
    ul.contactinfolist li.freedial2col{float: none; width: 100%; clear:both;}
    ul.contactinfolist li.freedial a ,
    ul.contactinfolist li.freedial2col div.freedial2colbox{padding-right:10em;}
    ul.contactinfolist li.freedial a:before ,
    ul.contactinfolist li.freedial2col div.freedial2colbox:before{content:" "; width:7em; height:7em;}

    ul.contactinfolist li.freedial a span.box02 ,
    ul.contactinfolist li.freedial2col p.box02{ text-align: center;}
    ul.contactinfolist li.freedial a span.box02 span ,
    ul.contactinfolist li.freedial2col p.box02 span{font-size:28px; font-size:1.75rem;}

    ul.contactinfolist li.freedial a span.box02:before ,
    ul.contactinfolist li.freedial2col p.box02:before{content:" "; display: none;}
    ul.contactinfolist li.freedial a span.box02 span ,
    ul.contactinfolist li.freedial2col p.box02 span{padding:0 1.5em 0 3em;}
    ul.contactinfolist li.freedial a span.box02 > span:after ,
    ul.contactinfolist li.freedial2col p.box02 > span:after{content:" "; display:block; position:absolute; top:0; bottom:0; right:0; margin:auto; width:0.8em; height:0.8em; background-image: url(../images/kiricosbanner/doublearrowicon168042.svg);} 

    #maincontent ul.contactinfolist li.freedial2col h5{text-align: center; font-size:24px;}
    #maincontent div.businesshourstext p{text-align: left; margin:0 auto; font-size:16px; font-size:1rem;}
    #maincontent div.businesshourstext p span.heddingtext{display:inline-block; margin-right:1em; padding:0.5em 1em 0.25em 1em; border:0; background:#4c4948; color:#ffffff; border-radius:1em; font-size:0.8em; line-height: 1; vertical-align: middle;}

    /*--- businesshourstextotaplus setting ---*/
    #maincontent div.businesshourstextotaplus dl{position:relative; padding:1em 0; border-width:1px 0; border-style:solid; border-color:#4c4948;}
    #maincontent div.businesshourstextotaplus dl:before{content:" "; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:100%; height:0px; background:#4c4948;}
    #maincontent div.businesshourstextotaplus dl dt ,
    #maincontent div.businesshourstextotaplus dl dd{float:left; padding:0;}
    #maincontent div.businesshourstextotaplus dl dt{position:relative; margin:0 auto; width:7.5em; padding:0 0.5em 0 0; border:0; text-align: left; font-size:1.25em;}
    #maincontent div.businesshourstextotaplus dl dt:before ,
    #maincontent div.businesshourstextotaplus dl dt:after{content:" "; display:block; position:absolute; margin:auto;}
    #maincontent div.businesshourstextotaplus dl dt:before{content:" "; bottom:-0.5em; right:0.25em; width:1em; height:1em; border-width:2px 0 0 0; border-style:solid; border-color:#4c4948; transform: rotate(45deg);}
    #maincontent div.businesshourstextotaplus dl dt:after{content:" "; bottom:0; left:0; right:0; width:100%; height:2px; background:#4c4948;}
    #maincontent div.businesshourstextotaplus dl dd{padding:0 0 2em 1em; width:calc(100% - 11em);}
    
    /*--- contactaddressotaplus setting
    ---------------------------------------------------*/
    
}

/* 769px(tabletsite) */
@media screen and (min-width:769px)
{

}

/* 1024px-over(tablet-pcsite) */
@media screen and (min-width:1024px)
{
    /*--- kiricos banner settign
    ---------------------------------------------------*/
    #maincontent div.bannertitle h3 img{max-width:320px;}
    ul.contactinfolist li a span.box01 ,
    #maincontent ul.contactinfolist li.freedial2col h4{font-size:24px; font-size:1.5rem;}
    ul.contactinfolist li.freedial a span.box02 span ,
    ul.contactinfolist li.freedial2col p.box02 span{font-size:32px; font-size:2rem;}

    #maincontent div.businesshourstext p{display: inline-block;}

    /*--- businesshourstextotaplus setting ---*/
    #maincontent div.businesshourstextotaplus dl dd ,
    #maincontent div.businesshourstextotaplus dl dd p{font-size:16px; font-size:1rem;}

    #maincontent div.businesshourstextotaplus dl dt{position:relative; margin:0 auto; width:7.5em; padding:0 0.5em 0 0; border:0; text-align: left; font-size:1.25em;}
    #maincontent div.businesshourstextotaplus dl dd{padding:0 0 1.5em 1em; width:calc(100% - 9.5em);}

    /*--- contactaddressotaplus setting ---*/
    #maincontent div.contactaddressotaplus > dl > dt{position:absolute; top:1.5em; left:0; padding:0; max-width:320px;}
    .contactaddressotaplus{grid-template-columns: 120px 1fr; column-gap: 1.5em;}
    #maincontent div.contactaddressotaplus dd.contactdate dt ,
    #maincontent div.contactaddressotaplus dd.contactdate dd ,
    #maincontent div.contactaddressotaplus dd.contactdate ul li{font-size:1rem;}
    #maincontent div.contactaddressotaplus dd.contactdate a{padding:0 0 0.25em 320px; margin: 0; margin-bottom:0; font-size: 2.5rem;}
    #maincontent div.contactaddressotaplus dd.contactdate ul{display:grid; grid-template-columns: 1.5fr 1fr;}
    #maincontent div.contactaddressotaplus dd.contactdate ul li{float:none; padding:0; border:0; width:100% !important;}
}

/* 1025px setting(pcsite) */
@media screen and (min-width:1025px)
{

}

/* fullsize pcsite setting(pcsite) */
@media screen and (min-width:1120px)
{

}

/*--- rwd setting end ---*/